<!--
 * @autoAdd: zhuxiaobao
-->
<!--
 * @autoAdd: zhuxiaobao
-->
<template>
  <a-modal :width="700" v-model="visible" title="提交测试" @ok="handleOk">
    <!-- 主表单区域 -->
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-row>
        <a-col :span="24">
          <a-form-model-item
            label="是否通过"
            prop="status"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-radio-group
              v-model="model.status"
              name="radioGroup"
              :default-value="'05'"
              size="small"
              @change="groupChange"
            >
              <a-radio :value="'05'">通过</a-radio>
              <a-radio :value="'04'">退回</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="model.status==='04'">
          <a-form-model-item
            label="退回理由"
            prop="returnReason"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-textarea
              v-model="model.returnReason"
              placeholder="请输入退回理由，200字以内"
              :rows="4"
              :maxLength="200"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            label="验证报告"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="returnReasonFile"
          >
            <a-upload
              name="file"
              :headers="headers"
              :multiple="false"
              :action="`${baseUrl}/sys/common/upload`"
              @change="returnReasonChange"
            >
              <a-button>
                <a-icon type="upload" />点击上传
              </a-button>
            </a-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-table
          :columns="columns"
          :data-source="tableData"
          :pagination="ipagination"
          @change="handleTableChange"
        >
          <a slot="testCase" slot-scope="text">
            <a :href="`${baseUrl}/sys/common/static/${text}`">点击下载</a>
          </a>
          <a slot="selfTestResults" slot-scope="text">
            <a :href="`${baseUrl}/sys/common/static/${text}`">点击下载</a>
          </a>
        </a-table>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import Vue from 'vue'
import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
import { postAction, getAction } from '@/api/manage'
export default {
  mixins: [JEditableTableModelMixin],
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 3 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 21 },
        sm: { span: 21 },
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
      model: {
      },
      validatorRules: {
        status: [{ required: true, message: '请选择是否通过！' },],
        returnReasonFile: [{ required: true, message: '请上传验证报告' },],
      },
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      headers: {
        'X-Access-Token': Vue.ls.get('Access-Token')
      },
      url: {
        list: '/demand/test/list',
        add: '/demand/test/returnReason'
      },
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      columns: [
        {
          title: '版本号',
          align: "center",
          dataIndex: 'commitNo'
        },
        {
          title: '测试案例',
          align: "center",
          dataIndex: 'testCase',
          scopedSlots: { customRender: 'testCase' },
        },
        {
          title: '自测结果',
          align: "center",
          dataIndex: 'selfTestResults',
          scopedSlots: { customRender: 'selfTestResults' },
        },
        {
          title: '提交人',
          align: "center",
          dataIndex: 'createBy'
        },
        {
          title: '提交时间',
          align: "center",
          dataIndex: 'createTime'
        },
      ],
      tableData: []
    }
  },
  methods: {
    edit(data) {
      this.visible = true
      this.model = { ...data }
      this.model.status = '05'
      this.queryTestFile({ demandId: this.model.id })
    },
    queryTestFile(data) {
      getAction(this.url.list, data).then(res => {
        const result = res.result
        this.tableData = result.records
        this.ipagination.total = res.result.total;
      })
    },
    groupChange(e){
      if(e.target.value==='04'){
        this.validatorRules.returnReason=[{ required: true, message: '请输入退回理由' }]
      }else{
        this.validatorRules.returnReason=[]
      }
    },
    handleOk() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const data = {
            demandId: this.model.id,
            status: this.model.status,
            returnReason: this.model.returnReason,
            returnReasonFile: this.model.returnReasonFile
          }
          postAction(this.url.add, data).then(res => {
            this.$message.success(res.message)
            this.$emit('ok')
            this.visible = false
          })
        } else {
          return false
        }
      })
    },
    returnReasonChange(file) {
      if (file.file.status === 'done') {
        const returnReasonFile = file.file.response.message
        this.model = { ...this.model, returnReasonFile }
      }
    },
    handleTableChange(pagination, filters, sorter) {
      this.queryTestFile(Object.assign(pagination, { demandId: this.model.id }))
    }
  },
}
</script>

<style lang="scss" scoped>
</style>